<template>
  <div class="bg-gray-800/40 rounded-lg border border-gray-700 p-3 hover:border-gray-500 transition-all duration-300">
    <div class="flex justify-between items-start mb-2">
      <h4 class="text-xs text-gray-400 font-medium">{{ title }}</h4>
      <div :class="['w-8 h-8 rounded-full flex items-center justify-center', iconBgColor]">
        <i :class="['fa ' + icon, iconColor]"></i>
      </div>
    </div>

    <div class="text-2xl font-bold mb-1">{{ value }}</div>

    <div class="flex items-center text-xs">
      <span :class="changeClass">
        <i class="fa" :class="changeIcon"></i>
        {{ change }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = {
  title: {
    type: String,
    required: true
  },
  value: {
    type: String,
    required: true
  },
  change: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'blue',
    validator: (value) => {
      return ['blue', 'green', 'orange', 'purple', 'red'].includes(value);
    }
  }
};

// 计算颜色相关的类
const iconColor = computed(() => {
  const colors = {
    blue: 'text-blue-400',
    green: 'text-green-400',
    orange: 'text-orange-400',
    purple: 'text-purple-400',
    red: 'text-red-400'
  };
  return colors[props.color];
});

const iconBgColor = computed(() => {
  const colors = {
    blue: 'bg-blue-500/10',
    green: 'bg-green-500/10',
    orange: 'bg-orange-500/10',
    purple: 'bg-purple-500/10',
    red: 'bg-red-500/10'
  };
  return colors[props.color];
});

// 计算变化趋势相关的类
const changeClass = computed(() => {
  return props.change.startsWith('+')
    ? 'text-green-400'
    : props.change.startsWith('-')
      ? 'text-red-400'
      : 'text-gray-400';
});

const changeIcon = computed(() => {
  return props.change.startsWith('+')
    ? 'fa-arrow-up'
    : props.change.startsWith('-')
      ? 'fa-arrow-down'
      : 'fa-minus';
});
</script>
